/* eslint-disable no-dupe-keys */
<template>
  <el-card class="box-card">
    <div class="container">
      <div class="header">
        <div class="search .clearfix">
          <span class="lable-name">关键字</span>
          <el-input v-model="keyword" placeholder="请输入内容"></el-input>
        </div>

        <div class="right-btn">
          <el-button size="small" @click="keyword = ''">清除</el-button>
          <el-button type="primary" size="small" @click="search"
            >搜索</el-button
          >
        </div>
      </div>
      <!-- 提示 -->
      <el-alert
        :closable="false"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
      />
      <!-- 表格  -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="220"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="{ row: { questionType: a } }">
            <span v-if="a === '1'">单选</span>
            <span v-else-if="a === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="220">
          <template slot-scope="{ row: { questionIDs: b } }">
            <el-button
              v-for="item in b"
              :key="item.number"
              type="text"
              @click="openDetails(item)"
              >{{ item.number }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template slot-scope="{ row: { addTime } }">
            <span>{{ addTime | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="准确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>

        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <!-- <el-button
              v-show="scope.row.state === 0"
              type="text"
              size="small"
              @click="delDate(scope.$index, scope.row)"
              >删除</el-button
            > -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delDate(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="20"
        layout="prev, pager, next,sizes, jumper"
        :total="total"
        :hide-on-single-page="value"
      >
      </el-pagination>
      <!-- 对话框 -->
      <preview-dialog
        :details="details"
        :dialogVisible.sync="dialogVisible"
      ></preview-dialog>
    </div>
  </el-card>
</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions.js'
import PreviewDialog from '@/module-hmmm/components/questions-preview.vue'
export default {
  components: {
    PreviewDialog
  },
  data () {
    return {
      keyword: '',
      // 条目数
      total: 0,
      // 页码 条目数
      page: 1,
      pagesize: 20,
      value: false,
      // 列表数据
      tableData: [],
      details: [{ question: '', questionType: '', options: [], videoURL: '', answerID: '' }],
      dialogVisible: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 请求列表数据
    async getList () {
      const params = {
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.keyword
      }
      const { data } = await randoms(params)
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
      if (this.total <= this.pagesize) this.value = !this.value
    },
    // search搜索
    search () {
      this.page = 1
      this.getList()
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getList()
    },
    // 每页条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page = 1
      this.pagesize = val
      this.getList()
    },
    // 删除
    delDate (i, row) {
      const data = {
        id: row.id
      }
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await removeRandoms(data)
          this.$message.success('删除成功!')
          this.getList()
        } catch (error) {
          console.warn(error)
          this.$message.error('删除失败!')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // openDetails 打开详情
    async openDetails (item) {
      const params = {
        id: item.id
      }
      try {
        const { data } = await detail(params)
        // console.log(data)
        this.dialogVisible = true
        this.details = [data]
        // this.$message.success('获取成功!')
      } catch (error) {
        console.warn(error)
        this.$message.error('试题数据获取失败!')
      }
    }
  }
}
</script>

<style  lang='less' scoped>
.box-card {
  margin: 10px;
  font-size: 14px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
}
.search {
  width: 400px;
  line-height: 42px;
  padding-left: 30px;
}
.el-input {
  float: right;
  width: 312px;
  height: 32px;
}
.lable-name {
  float: left;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
/* 提示 */
.el-alert {
  margin-top: 20px;
  margin-bottom: 16px;
}
/* 分页 */
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
// btn
.el-button + .el-button {
  margin-left: 0;
}
.el-button--medium {
  padding: 0px 0px;
}
.el-button--danger {
  padding: 10px 10px;
}
//el-button--default
.el-button--default {
  margin-right: 10px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
</style>
